import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:mobx/mobx.dart';
import 'package:state_manage/mobx/counter/counter.dart';

/// Mobx计数器页面
class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Mobx Counter',
      theme: ThemeData(primaryColor: Colors.blue),
      home: CounterStatePage(title: 'Mobx Counter'),
    );
  }
}

class CounterStatePage extends StatefulWidget {
  /// 标题
  final String title;
  CounterStatePage({Key key, this.title}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _CounterStatePageState();
}

class _CounterStatePageState extends State<CounterStatePage> {
  /// 创建管理者
  final Counter _counter = Counter();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'You have pushed the button this many times:',
              ),
              Observer( // 观察数据
                builder: (_) => Text(
                  '${_counter.value}',
                  style: Theme.of(context).textTheme.display1,
                ),
              )
            ],
          ),
        ),
        floatingActionButton: Column(
            crossAxisAlignment: CrossAxisAlignment.end,
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              // 加
              Padding(
                padding: EdgeInsets.symmetric(vertical: 5.0),
                child: FloatingActionButton(
                  onPressed: _counter.increment,
                  tooltip: 'Increment',
                  child: Icon(Icons.add),
                ),
              ),
              // 减
              Padding(
                padding: EdgeInsets.symmetric(vertical: 5.0),
                child: FloatingActionButton(
                  onPressed: _counter.decrement,
                  tooltip: 'Decrement',
                  child: Icon(Icons.remove),
                ),
              )
            ]));
  }
}
